<template>
  <div style="padding: 15px 24px; background: #fff">
    <el-table
      ref="multipleTable"
      :data="subjectivequestionslist"
      tooltip-effect="dark"
      border
      style="width: 100%"
      stripe
      @selection-change="handleSelectionChange"
      :header-cell-style="{
        background: '#D8E4F0',
        color: '#2A303B',
        fontWeight: '500',
      }"
      :height="tableheight"
    >
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" label="题组">
        <template slot-scope="scope">
          {{
            scope.row.questionGroupName == 0 ||
            scope.row.questionGroupName == null
              ? "-"
              : scope.row.questionGroupName
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="试题编号">
        <template slot-scope="scope">
          {{ scope.row.questionNumber == 0 ? "-" : scope.row.questionNumber }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="小题号">
        <template slot-scope="scope">
          {{
            scope.row.smallQuestionNumber == 0
              ? "-"
              : scope.row.smallQuestionNumber
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sourcename" label="题型">
        <template slot-scope="scope">
          {{
            scope.row.questionTypeName == null
              ? "-"
              : scope.row.questionTypeName
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="满分">
        <template slot-scope="scope">
          {{ scope.row.fullScore == null ? "-" : scope.row.fullScore }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="步长">
        <template slot-scope="scope">
          {{ scope.row.stepSize == null ? "-" : scope.row.stepSize }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="切图查看"
        prop="status"
        width="300"
      >
        <template slot-scope="scope">
          <!-- <div style="display:flex;"> -->
          <span
            style="
              color: #165dff;
              cursor: pointer;
              font-size: 14px;
              padding: 0 8px;
            "
            v-for="(itemimg, num) in scope.row.examTemplateFieldList"
            :key="num"
            @click="
              showViewerclick(
                scope.row.examTemplateFieldList,
                itemimg.sliceUrl,
                num
              )
            "
            >切图{{ num + 1 }}</span
          >
          <!-- </div> -->
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <div style="display: flex" class="scopednr">
            <b @click="editExamschool(scope.row.id)">编辑</b>
            <b @click="dgdeletequestion(scope.row.id)">删除</b>
          </div>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="page-bottom">
      <div class="examfooter">
        <div class="examFootercontent">
          <div>
            <span class="totaldata"
              >共<i>{{ subjectivequestionslist.length }}</i
              >条数据,已选{{ multipleSelection.length }}条</span
            >
            <el-button
              type="primary"
              style="margin-left: 20px"
              @click="setquestiongrouptap"
              :disabled="scanStatus != 0"
              >设置题组</el-button
            >
            <!-- <el-button style="background:#1A48DB;color:#fff;margin-left:20px;border-color:#1A48DB;">复用考试</el-button> -->
            <!-- <el-button type="primary" @click="setsteptap"
              >批量设置步长</el-button
            >
            <el-button
              type="danger"
              :disabled="multipleSelection.length == 0"
              @click="batchDeletateobjective"
              >批量删除</el-button
            > -->
          </div>
          <div>
            <!-- <el-pagination
                      background
                      @current-change="handleCurrentChange"
                      :page-sizes="[20, 50,100]"
                      @size-change="handleSizeChange"
                      :page-size="pageSize"
                      layout="sizes, prev, pager, next"
                      :total="total">
                  </el-pagination> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑主观题 -->
    <editSubjectdata
      v-if="editSubjectdataIshow"
      :editsubjectdatalist="editsubjectdatalist"
      @updateobjectivequestionssurebc="updateobjectivequestionssurebc"
    ></editSubjectdata>
    <!-- 图片查看组件 -->
    <ImageViewer
      :images="images"
      :initialIndex="selectedIndex"
      :visible="showViewer"
      @update:visible="(val) => (showViewer = val)"
    />
    <!-- 设置题组 -->
    <el-dialog
      ref="editDialog"
      class="editKmVisible"
      title="设置题组"
      :visible.sync="setquestiongroupshow"
      width="500px"
    >
      <!-- :before-close="beforeClose" -->
      <p style="color: #1a48db">可设置题组已用于阅卷题组组合</p>
      <div style="display: flex; align-items: center" class="questionNamelist">
        <span>题组名称：</span><el-input v-model="questionName"></el-input>
      </div>
      <el-table
        class="custom-tables"
        ref="multipleTable"
        :data="multipleSelection"
        tooltip-effect="dark"
        border
        style="width: 100%"
        stripe
        @selection-change="handleSelectionChange"
        :header-cell-style="{
          background: '#D8E4F0',
          color: '#2A303B',
          fontWeight: '500',
        }"
      >
        <el-table-column align="center" label="试题编号">
          <template slot-scope="scope">
            <el-input v-model="scope.row.questionNumber"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="questionTypeName"
          label="题型"
        ></el-table-column>
        <!-- <el-table-column align="center" label="操作" width="280">
          <template slot-scope="scope">
            <span @click="handleDelete(scope.$index)">删除</span>
          </template>
        </el-table-column> -->
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sureboxquestiongroup" type="primary">保存</el-button>
        <el-button @click="sureboxquestiongroupback">返回</el-button>
      </div>
    </el-dialog>
    <!-- 批量设置步长 -->
    <el-dialog
      ref="editDialog"
      class="editKmVisible"
      title="批量设置步长"
      :visible.sync="stepsetishow"
      width="500px"
    >
      <p style="color: #1a48db">
        步长可设置制定分值给分，请用英文逗号分隔（,）
      </p>
      <el-table
        class="custom-tables1"
        ref="multipleTable"
        :data="steplist"
        tooltip-effect="dark"
        border
        style="width: 100%"
        stripe
        :header-cell-style="{
          background: '#D8E4F0',
          color: '#2A303B',
          fontWeight: '500',
        }"
        :height="280"
      >
        <el-table-column align="center" label="试题编号">
          <template slot-scope="scope">
            <div
              style="display: flex; align-items: center"
              class="tablindexinput"
            >
              <el-input v-model="scope.row.startNumber"></el-input>-<el-input
                v-model="scope.row.endNumber"
              ></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="questiontype" label="给分步长">
          <template slot-scope="scope">
            <el-input v-model="scope.row.size"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120">
          <template slot-scope="scope">
            <span
              v-if="scope.$index === steplist.length - 1"
              style="color: #165dff"
              @click="handleAdd"
              >新增</span
            >
            <span @click="handleClear">清空</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sureboxquestiongroup1" type="primary"
          >保存</el-button
        >
        <el-button @click="sureboxquestiongroupback1">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ImageViewer from "../imageview/imageview.vue";
import editSubjectdata from "./editSubjectdata.vue";
import {
  subjectiveDetail,
  batchdeletesubject,
  batchquestionGroup,
  batchSettingStep,
} from "@/api/paperinfo/paperinfo.js";

// import { batchdeleteSubjetive, editsubjective,editsubjective2 } from '../../api/api.js'
export default {
  components: { ImageViewer },
  props: ["subjectivequestionslist", "examid", "scanStatus"],
  data() {
    return {
      multipleSelection: [],
      editsubquestionIshow: false,
      editsubjectquestionlist: {
        sourceflagid: 0,
        sourcename: 0,
        sourcename3: "",
        highestscore: 0,
        difficulty: 0,
        bc: 1,
        itemCaseflagid: 0,
        cuttype: 0,
        type: 0,
        pagetype: 0,
        doublescoretype: 1,
      },
      questionclassifylist: [
        {
          id: 0,
          name: "主观题",
        },
        {
          id: 1,
          name: "单选题",
        },
        {
          id: 2,
          name: "多选题",
        },
      ],
      doobbleplun: [
        { id: "0", name: "一评" },
        { id: "1", name: "多评" },
      ],
      showViewer: false,
      selectedIndex: 0,
      images: [],
      rules: {
        sourcename: [
          { required: true, message: "请输入来源名称", trigger: "blur" },
        ],
        sourcename3: [
          { required: true, message: "请输入来源名称3", trigger: "blur" },
        ],
        highestscore: [
          { required: true, message: "请输入最高分", trigger: "blur" },
        ],
        difficulty: [
          { required: true, message: "请输入难度", trigger: "blur" },
        ],
        bc: [{ required: true, message: "请输入BC", trigger: "blur" }],
        doublescoretype: [
          { required: true, message: "请选择双分类型", trigger: "change" },
        ],
      },
      questiongroupdatalist: [
        {
          questionGroup: [{ questionnumber: "", questiontype: "" }],
        },
      ],
      setquestiongroupshow: false,
      stepsetishow: false,
      editSubjectdataIshow: false,
      editsubjectdatalist: [],
      total: 0,
      pageSize: 1,
      steplist: [
        {
          startNumber: "",
          endNumber: "",
          size: "",
        },
      ],
      questionName: "",
      questionlistdata: [
        {
          name: "",
          examTemplateId: "",
          questionNumbers: [],
        },
      ],
      tableheight: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.tableheight = window.innerHeight - 340;
    });
  },
  methods: {
    handleGroup() {
      let thatparent = {
        questionGroup: [{ questionnumber: "", questiontype: "" }],
      };
      this.questiongroupdatalist.push(thatparent);
    },
    //编辑主观题
    editsubjecttap(id) {
      subjectiveDetail(id).then((res) => {
        if (res.code == 200) {
          this.editsubjectdatalist = [res.data];
          console.info();
        }
      });
    },
    //设置题组
    setquestiongrouptap() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择要设置的题组",
          type: "warning",
        });
        return;
      }
      this.setquestiongroupshow = true;
    },
    //题组确定
    sureboxquestiongroup() {
      this.setquestiongroupshow = false;
      this.questionlistdata[0].name = this.questionName;
      this.questionlistdata[0].examTemplateId = this.examid;
      this.questionlistdata[0].questionNumbers = this.multipleSelection.map(
        (item) => item.questionNumber
      );
      console.info(this.questionlistdata, "this.questionlistdata");
      batchquestionGroup(this.questionlistdata).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "设置题组成功",
            type: "success",
          });
          this.questionlistdata = [
            {
              name: "",
              examTemplateId: "",
              questionNumbers: [],
            },
          ];
          this.questionName = "";
          this.$emit("emitsubjectivequestion", 1);
        }
      });
    },
    //题组取消
    sureboxquestiongroupback() {
      this.setquestiongroupshow = false;
    },
    sureboxquestiongroupback1() {
      this.stepsetishow = false;
    },
    //批量设置步长
    setsteptap() {
      this.stepsetishow = true;
    },
    //步长确定
    sureboxquestiongroup1() {
      let hasEmpty = this.steplist.some((item) => {
        return !item.startNumber || !item.endNumber || !item.size;
      });

      if (hasEmpty) {
        this.$modal.alert("有未填写数据，请您填写完整后提交");
        return;
      }
      let obj = {
        templateId: this.examid,
        stepVoList: this.steplist,
      };
      batchSettingStep(obj).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "设置步长成功",
            type: "success",
          });
          this.stepsetishow = false;
          (this.steplist = [
            {
              startNumber: "",
              endNumber: "",
              size: "",
            },
          ]),
            this.$emit("emitsubjectivequestion", 1);
        }
      });
    },
    //步长取消
    sureboxquestiongroupback2() {
      this.stepsetishow = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange() {},
    handleSizeChange() {},
    updateobjectivequestionssurebc() {
      this.editSubjectdataIshow = false;
      this.$emit("emitsubjectivequestion", 1);
    },
    //批量删除
    batchDeletateobjective() {
      let ids = this.multipleSelection.map((item) => item.id);
      // sourceflagids
      if (ids.length == 0) {
        this.$message({
          type: "error",
          message: "请选择要删除的题目!",
        });
        return;
      }
      console.info("ids", ids);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          batchdeletesubject(ids).then((res) => {
            if (res.code == 200) {
              this.$emit("emitsubjectivequestion", 1);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 单个删除
    dgdeletequestion(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          batchdeletesubject([id]).then((res) => {
            if (res.code == 200) {
              this.$emit("emitsubjectivequestion", 1);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑
    editExamschool(con) {
      this.editSubjectdataIshow = true;
      this.editsubjecttap(con);
    },
    editquestionsurebc() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          editsubjective2(this.editsubjectquestionlist).then((res) => {
            console.info("res", res);
            if (res.code == 0) {
              this.editsubquestionIshow = false;
              this.$emit("emitsubjectivequestion", 1);
              this.$message({
                type: "success",
                message: "编辑成功!",
              });
              this.editsubjectquestionlist = {
                sourceflagid: 0,
                sourcename: 0,
                sourcename3: "",
                highestscore: 0,
                difficulty: 0,
                bc: 1,
                itemCaseflagid: 0,
                imgWidth: 0,
                imgHeight: 0,
                cuttype: 0,
                ax: 0,
                ay: 0,
                type: 0,
                pagetype: 0,
              };
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        } else {
          this.$message.error("请输入完整的信息");
        }
      });
    },
    editquestiongoback() {
      this.editsubquestionIshow = false;
      this.editsubjectquestionlist = {
        sourceflagid: 0,
        sourcename: 0,
        sourcename3: "",
        highestscore: 0,
        difficulty: 0,
        bc: 1,
        itemCaseflagid: 0,
        imgWidth: 0,
        imgHeight: 0,
        cuttype: 0,
        ax: 0,
        ay: 0,
        type: 0,
        pagetype: 0,
      };
    },
    showViewerclick(imagearry, imgs, index) {
      this.images = imagearry.map((item) => item.sliceUrl);
      console.info(this.images, "index");
      this.selectedIndex = index;
      this.showViewer = true;
    },
    // 新增数据（在最后一行添加）
    handleAdd() {
      this.steplist.push({
        startNumber: "",
        endNumber: "",
        size: "",
      });
    },

    // 删除数据（如果是第一行，只清空内容；否则删除整行）
    handleDelete(index) {
      if (index === 0) {
        // 第一行只清空内容，不删除
        this.questiongroupdatalist[0] = {
          questionnumber: "",
          questiontype: "",
        };
      } else {
        console.log(index)
        // 其他行直接删除
        this.questiongroupdatalist.splice(index, 1);
      }
    },

    // 清空数据（只保留第一条，并清空内容）
    handleClear() {
      this.questiongroupdatalist = [
        {
          questionnumber: "",
          questiontype: "",
        },
      ];
    },
  },
  components: { editSubjectdata, ImageViewer },
};
</script>

<style scoped>
.custom-table {
  width: 100%;
  border: 1px solid rgba(216, 228, 240, 0.5);
  border-right: none;
  border-bottom: none;
}

/* 自定义表格内部元素的样式 */
.custom-table >>> .el-table__header-wrapper th {
  background-color: #e8f0fa;
  height: 42px;
  padding: 0;
  text-align: center;
  font-weight: normal;
}

.custom-table >>> .el-table__row td {
  height: 42px;
  padding: 0;
  text-align: center;
  border-bottom: none;
  border-right: solid 1px rgba(216, 228, 240, 0.34);
  font-size: 14px;
}

.el-table .warning-row {
  background: #ffffff;
}

.el-table .success-row {
  background: #d8e4f0;
}

.el-table .el-table__cell {
  padding: 8px 0;
}

.examfooter {
  width: 100%;
  height: 54px;
  left: 0;
  bottom: 0;
}

.examFootercontent {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.examFootercontent .totaldata {
  font-size: 14px;
}

.examFootercontent .totaldata i {
  display: inline-block;
  color: #295cff;
  font-style: normal;
  line-height: 54px;
  padding: 0 3px;
}

.scopednr b {
  display: inline-block;
  font-weight: normal;
  margin: 0 8px;
  color: #165dff;
  cursor: pointer;
  text-decoration: underline;
}

.scopednr b:last-child {
  color: #d54941;
}

.objsubMain {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
}

.objsubContent {
  box-sizing: border-box;
  width: 1040px;
  max-height: 600px;
  background: #ffffff;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
}

.objsubContent h3 {
  font-size: 18px;
  font-weight: normal;
}

.objsubattention {
  display: flex;
  font-size: 14px;
  color: #619cf5;
  padding: 10px 0 24px;
}

.boxsetscorll {
  height: 390px;
  overflow-x: hidden;
  overflow-y: auto;
}

.boxsetscorll::-webkit-scrollbar {
  width: 6px;
  background-color: #eee;
  border-radius: 10px;
}

.boxsetscorll::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

.boxsetscorll::-webkit-scrollbar-thumb {
  background: #619cf5;
  border-radius: 10px;
}

.tablebox {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
}

.tableboxtitle {
  display: flex;
  align-items: center;
  height: 42px;
  background: #e8f0fa;
  border-radius: 10px 10px 0 0;
}

.tableboxtitle li {
  line-height: 42px;
  text-align: center;
  font-size: 14px;
  color: #2a303b;
  border-right: 1px solid rgba(216, 228, 240, 0.34);
}

.tableboxtitle li:first-child {
  border-radius: 10px 0 0 0;
}

.tableboxtitle li:last-child {
  border-radius: 0 10px 0 0;
  border-right: none;
}

.tableboxcontent {
  width: 100%;
}

.tableboxcontent li:nth-child(2n) {
  background: #fafafb;
}

.bigquestion {
  display: flex;
  align-items: center;
}

.tabletrtd {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 42px;
  border-right: 1px solid rgba(216, 228, 240, 0.34);
}

.bigquestion div.tabletrtd:last-child {
  border-right: none;
}

.groupbutton {
  margin-top: 20px;
}
>>> .el-table th.el-table__cell > .cell {
  font-size: 14px;
  font-weight: 700;
}
.setquestiongroup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}
.setquestiongroupcontent {
  box-sizing: border-box;
  width: 426px;
  height: 470px;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 20px;
}
.bcbackcontent {
  margin-top: 20px;
  display: flex;
  padding-right: 20px;
}
.bcbackcontent >>> .el-button {
  width: 130px;
  line-height: 30px;
  font-size: 16px;
  border: none;
}
.bcbackcontent >>> .el-button:first-child {
  background: #1a48db;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.bcbackcontent >>> .el-button:last-child {
  background: rgba(26, 72, 219, 0.1);
  text-align: center;
  line-height: 30px;
  color: #1a48db;
}
.custom-tables {
  width: 100%;
  border: 1px solid rgba(216, 228, 240, 0.5);
  border-radius: 4px;
  border-right: none;
  border-bottom: none;
}
/* 自定义表格内部元素的样式 */
.custom-tables >>> .el-table__header-wrapper th {
  background-color: #e8f0fa;
  height: 42px;
  padding: 0;
  text-align: center;
  font-weight: normal;
}
.custom-tables >>> .el-table__row td {
  height: 42px;
  padding: 0;
  text-align: center;
  border-bottom: none;
  border-right: solid 1px rgba(216, 228, 240, 0.34);
  font-size: 14px;
}
.custom-tables span {
  display: inline-block;
  margin: 0 8px;
  color: #d54941;
  cursor: pointer;
}
.custom-tables >>> .el-input__inner {
  width: 60px;
  height: 30px;
  border: solid 1px #e0e0e0;
  text-align: center;
}
.custom-tables1 {
  width: 100%;
  border: 1px solid rgba(216, 228, 240, 0.5);
  border-radius: 4px;
  border-right: none;
  border-bottom: none;
}
/* 自定义表格内部元素的样式 */
.custom-tables1 >>> .el-table__header-wrapper th {
  background-color: #e8f0fa;
  height: 42px;
  padding: 0;
  text-align: center;
  font-weight: normal;
}
.custom-tables1 >>> .el-table__row td {
  height: 42px;
  padding: 0;
  text-align: center;
  border-bottom: none;
  border-right: solid 1px rgba(216, 228, 240, 0.34);
  font-size: 14px;
}
.custom-tables1 span {
  display: inline-block;
  margin: 0 8px;
  color: #d54941;
  cursor: pointer;
}
.custom-tables1 >>> .el-input__inner {
  width: 60px;
  height: 30px;
  border: solid 1px #e0e0e0;
  text-align: center;
}
.tablindexinput >>> .el-input__inner {
  width: 40px;
}
.bcbackcontent {
  margin-top: 20px;
  display: flex;
  padding-right: 20px;
}
.bcbackcontent >>> .el-button {
  width: 130px;
  line-height: 30px;
  font-size: 16px;
  border: none;
}
.bcbackcontent >>> .el-button:first-child {
  background: #1a48db;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.bcbackcontent >>> .el-button:last-child {
  background: rgba(26, 72, 219, 0.1);
  text-align: center;
  line-height: 30px;
  color: #1a48db;
}
>>> .el-input__inner {
  padding: 0 !important;
}
.questionNamelist >>> .el-input__inner {
  width: 200px;
  height: 35px;
  padding: 0 15px !important;
}
.questionNamelist {
  font-size: 14px;
  padding-bottom: 15px;
}
.questionNamelist span {
  display: inline-block;
  width: 90px;
}
</style>